<template>
	<view class="container">
		<view class="main" v-if="userInfo">
			<view class="list-cell b-b f-avatar">
				<text class="cell-tit">头像</text>
				<image class="b-avatar" :src="userInfo.avatar_url" @click="onPreviewAvatar"></image>
				<!-- #ifdef  MP-WEIXIN -->
				<button class="cell-more iconfont icon-more open-data-btn" open-type="chooseAvatar"
					@chooseavatar="onChooseAvatar"></button>
				<!-- #endif -->
				<!-- #ifdef  H5 -->
				<text class="cell-more iconfont icon-more" @click="onUploadAvatar"></text>
				<!-- #endif -->
			</view>
			<view class="list-cell b-b" @click="onRedirect('change-nickname')">
				<text class="cell-tit">昵称</text>
				<text class="cell-tip">{{userInfo.nickname}}</text>
				<text class="cell-more iconfont icon-more"></text>
			</view>
			<view class="list-cell">
				<text class="cell-tit">性别</text>
				<view class="cell-tip f-option">
					<picker @change="onFilter" data-field="gender" :value="genderIndex" :range="genderList"
						range-key="name">{{this.genderList[this.genderIndex].name}}
					</picker>
				</view>
				<text class="cell-more iconfont icon-more"></text>
			</view>
			<view class="list-cell m-t b-b" @click="onRedirect('change-phone')">
				<text class="cell-tit">手机号</text>
				<text class="cell-tip">{{userInfo.mobile}}</text>
				<text class="cell-more iconfont icon-more"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		updateUserInfo
	} from '@/service/api/user.js'
	import {
		uploadImage
	} from '@/service/api/common.js'
	import {
		compressImage
	} from '@/common/util.js'
	import mixinsAuth from '@/mixins/auth.js'
	import mixinsCommon from '@/mixins/common.js'
	export default {
		mixins: [mixinsCommon, mixinsAuth],
		data() {
			return {
				userInfo: null,
				genderList: [{
					value: 1,
					name: '男'
				}, {
					value: 0,
					name: '女'
				}, {
					value: 2,
					name: '未设置'
				}],
				genderIndex: 0,
				loadingType: 1,
				loadingText: '',
			}
		},
		onLoad() {
			this.loadUserInfo()
		},
		computed: {
			loginMethods() {
				return this.$store.getters.globalConfig.login_methods || []
			},
		},
		methods: {
			loadUserInfo() {
				getUserInfo().then(([err, res]) => {
					console.log('getUserInfo', err, res)
					if (!err) {
						this.loadingType = -1
						this.userInfo = res
						for (let i = 0; i < this.genderList.length; i++) {
							if (this.genderList[i].value == res.gender) {
								this.genderIndex = i
								break
							}
						}
					} else {
						this.loadingType = 3
						this.loadingText = err.data.msg || '加载失败'
					}
				})
			},
			onFilter(e) {
				console.log('onFilter', e.target.dataset.field, e.detail.value)
				const field = e.target.dataset.field
				if (field === 'gender') {
					this.genderIndex = e.detail.value
					updateUserInfo(null, this.genderList[this.genderIndex].value).then(([err, res]) => {
						console.log('updateUserInfo', err, res)
						if (!err) {
							this.$logic.showToast('修改成功')
						}
					})
				}
			},
			onRedirect(type) {
				console.log('onRedirect', type)
				var pages = {
					'change-phone': '/pages/user/change_phone',
					'change-nickname': '/pages/user/change_nickname',
				}
				var page = pages[type] || ''
				if (page) {
					uni.navigateTo({
						url: page
					})
				}
			},
			onPreviewAvatar() {
				uni.previewImage({
					current: 0,
					urls: [this.userInfo.avatar_url]
				})
			},
			onChooseAvatar(e) {
				console.log('onChooseAvatar', e)
				let imageUrl = e.detail.avatarUrl
				uploadImage(imageUrl).then(([err, res]) => {
					console.log('uploadImage', err, res)
					if (!err) {
						updateUserInfo(res.url).then(([err, res]) => {
							console.log('updateUserInfo', err, res)
							if (!err) {
								this.userInfo.avatar_url = imageUrl
								this.$logic.showToast('修改成功')
							}
						})
					}
				})
			},
			onUploadAvatar(e) {
				console.log('onUploadAvatar', e)
				uni.chooseImage({
					count: 1, // 1张
					sizeType: ['compressed'], // 压缩图
				}).then(([err, res]) => {
					console.log('chooseImage', err, res)
					if (!err) {
						compressImage(res.tempFiles[0], 500, 500).then(([err, res]) => {
							console.log('compressImage', err, res)
							if (!err) {
								let imageUrl = res
								uploadImage(imageUrl).then(([err, res]) => {
									console.log('uploadImage', err, res)
									if (!err) {
										updateUserInfo(res.url).then(([err, res]) => {
											console.log('updateUserInfo', err, res)
											if (!err) {
												this.userInfo.avatar_url = imageUrl
												this.$logic.showToast('修改成功')
											}
										})
									}
								})
							}
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.list-cell {
		padding: 20upx $page-row-spacing;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 60upx;
		position: relative;
		background: #fff;

		&.cell-hover {
			background: #fafafa;
		}

		&.m-t {
			margin-top: 30upx;
		}


		.cell-tit {
			flex: 1;
			font-size: $font-base + 2upx;
			color: $pq-main-color;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: $font-base;
			color: $font-color-light;

			&.f-option {}
		}

		.cell-more {
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.b-avatar {
			width: 80upx;
			height: 80upx;
			border: 2upx solid #fff;
			border-radius: 50%;
		}
	}
</style>